<%--
  Created by IntelliJ IDEA.
  User: 马福又
  Date: 2020/7/23
  Time: 9:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html class="iframe-h">

<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>网站后台管理模版</title>
    <link rel="stylesheet" type="text/css" href="../../static/admin/layui/css/layui.css" />
    <link rel="stylesheet" type="text/css" href="../../static/admin/css/admin.css" />
</head>

<body>
<div class="wrap-container clearfix">
    <div class="column-content-detail">
        <form class="layui-form" action="" name="myForm">
            <div class="layui-form-item">
                <div class="layui-inline tool-btn">
                    <%--<button class="layui-btn layui-btn-small layui-btn-danger delBtn"  data-url="#"><a class="layui-icon">&#xe642;批量出库</a></button>--%>
                    <a class="layui-btn layui-btn-normal" id="ming">&#xe642;批量出库</a>
                </div>
                <div class="layui-inline">
                    <input type="text" name="title" required lay-verify="required" placeholder="请输入订单编号，注意区分大小写"  class="layui-input">
                </div>
                <div class="layui-inline" id="searchType">
                    <select name="states" lay-filter="status" id="typeNameSelect">
                        <option value="">请选择一个商品类型</option>
                        <option value="">请选择商品类型</option>
                        <option value="易碎物品">易碎物品</option>
                        <option value="大件">大件</option>
                    </select>
                </div>
                <div class="layui-inline" id="ppage">
                    <select id="selectPageSize" lay-filter="status">
                        <option value="">每页显示数量</option>
                        <option value="10">10</option>
                        <option value="20">20</option>
                        <option value="50">50</option>
                        <option value="100">100</option>
                        <option value="200">200</option>
                    </select>
                </div>
                <button class="layui-btn layui-btn-normal"id="search">搜索</button>
                <a class="layui-btn layui-btn-normal" id="excel">报表</a>
            </div>

        </form>

        <div class="layui-form" id="table-list">
            <table class="layui-table" lay-even lay-skin="nob">
                <colgroup>
                    <col width="50">
                    <col class="hidden-xs" width="50">
                    <col class="hidden-xs" width="100">
                    <col>
                    <col class="hidden-xs" width="150">
                    <col class="hidden-xs" width="150">
                    <col width="80">
                    <col width="150">
                </colgroup>
                <thead>
                <tr>
                    <th ><input type="checkbox" name="allCheckbox" lay-skin="primary" lay-filter="allChoose" id="checkedAll"></th>
                    <th class="hidden-xs">仓库ID</th>
                    <th class="hidden-xs">仓库名</th>
                    <th>时间</th>
                    <th class="hidden-xs">仓库管理员</th>
                    <th>订单状态</th>
                    <th class="hidden-xs" >订单编号</th>
                    <th style="padding: 12px;">物品类型</th>
                    <th>物品重量</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="bodyData" class="DataTbody">
                <tr>
                    <td><input type="checkbox" name="erCheckbox" lay-skin="primary" data-id="1"></td>
                    <td class="hidden-xs" >1</td>
                    <td class="hidden-xs" >内蒙古仓库</td>
                    <td>刘先生</td>
                    <td class="hidden-xs">20200121</td>
                    <td class="hidden-xs">易碎物品</td>
                    <td>45kg</td>
                    <td id="timelo">20200121</td>
                    <td>20200122</td>
                    <td>下一站：北京</td>
                    <td>
                        <button class="layui-btn layui-btn-mini layui-btn-normal  edit-btn"  data-id="1" data-url="menu-add2.jsp">
                            <i class="layui-icon">修改</i>
                        </button>
                    </td>
                </tr>
                </tbody>
            </table>
            <!--分页-->
            <div class="page-wrap" id="Pagination">
                <ul class="pagination">
                    <li class="disabled"><span>«</span></li>
                    <li class="active"><span>1</span></li>
                    <li>
                        <a href="#">2</a>
                    </li>
                    <li>
                        <a href="#">»</a>
                    </li>
                </ul>
            </div>

        </div>
    </div>
</div>


<script src="../../static/admin/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script src="../../static/admin/js/common.js" type="text/javascript" charset="utf-8"></script>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        var pageNum  = 1;
        var pageSize = 2;
        sendAjax(pageNum,pageSize);
        findAmountType();
        // 分页事件
        $(document).on("click","#Pagination a",function () {
            var pageNum = $(this).prop("title");
            sendAjax(pageNum,pageSize);
        });
        //搜索按钮点击事件
        $(document).on("click","#search",function () {
            var options=$("#selectPageSize option:selected"); //获取选中的项
            var typeName = $("#typeNameSelect option:selected").val();
            var orderId = $("input[name='title']").val();
            var pageNum  = 1;
            var pageSize = options.val();
            if (typeName ==""&&pageSize==""&&orderId=="") {
                alert("搜索内容不能为空");
                return;
            }
            alert(typeName);
            alert(options.val()); //拿到选中项的值
            alert(orderId);
            conditionAjax(pageNum,pageSize,orderId,typeName);
        });

        $("#checkedAll").click(function() {
            var che = $("#checkedAll").prop("checked",true);
            if (che==true) {
                $(":checkbox[name='checked']").prop("checked",true);
            }else {
                $(":checkbox[name='checked']").prop("checked",false);
            }
        });

        $(document).on("click", ":checkbox[name='checked']", function() {
            // 1.获取商品复选框的总个数
            var productCheckboxCount = $(":checkbox[name='checked']").length;

            // 2.获取商品复选框选中的个数
            var checkedCount = $(":checkbox[name='checked']:checked").length;

            // 3.比较选中的个数和总个数
            if(productCheckboxCount == checkedCount){
                $("#checkedAll").prop("checked",true);
            }else{
                $("#checkedAll").prop("checked",false);
            }
        });


            //批量出库
        $(document).on("click","#ming",function () {
       // 遍历 复选框被选中的订单列表
            var orderId = 0;
            $(":checkbox[name='checked']:checked").each(function() {
                orderId = $(this).parents("tr").find("#orderIdInfo").text();
                updateAjax(orderId);
            });
            sendAjax(pageNum,pageSize);
        });
        //单独出库
        $(document).on("click","#updateInfo",function () {
            var orderId = $(this).parents("tr").find("#orderIdInfo").text();
            updateAjax(orderId);
            sendAjax(pageNum,pageSize);
        });
        //报表
        $(document).on("click","#excel",function (){
            $(":checkbox[name='checked']:checked").each(function() {
                var op = $(this).parents("tr").find("#opcodeInfo").text();
                var  opCode = "";
                if (op=="揽件") {
                      opCode = 0;
                }
                if (op=="入库") {
                      opCode = 1;
                }
                if (op=="出库") {
                     opCode = 2;
                }
                if (op=="派送中") {
                    opCode = 3;
                }
                var orderId = $(this).parents("tr").find("#orderIdInfo").text();
                //alert(opCode);
                excelAjax(opCode,orderId);
            });
        });
    });

    function conditionAjax(pageNum,pageSize,orderId,typeName) {
        $(".DataTbody").empty();
        var content = "";
        $.ajax({
            async:true,
            type:"GET",
            url:"${pageContext.request.contextPath}/track/getOrderCondition",
            data:{
                pageNum:  pageNum,
                pageSize: pageSize,
                typeName: typeName,
                orderId: orderId
            },
            dataType:"json",
            success:function (result) {
                // 数据的渲染
                console.log(result);

                $.each(result.list,function (index,Order) {
                    $.each(Order.tracks,function (index,Track) {
                        content+="<tr>\n" +
                            "           <td><input type=\"checkbox\" name=\"checked\" lay-skin=\"primary\" data-id=\"1\"></td>\n" +
                            "           <td class=\"hidden-xs\" style=\"width:50px; \"  >"+Track.house.houseId+"</td>\n" +
                            "           <td class=\"hidden-xs\" style=\"width:200px; \" >"+Track.house.houseName+"</td>\n";
                        if( Track.opCode == 0 ){
                            content+=    "               <td id=\"timelo\"style=\"width:300px; \">揽件："+Track.dateTime+"</td>\n"   ;
                        } else if (Track.opCode == 1) {
                            content+=   "               <td id=\"timelo\" style=\"width:300px; \">入库："+Track.dateTime+"</td>\n"    ;
                        }else if (Track.opCode == 2) {
                            content+=   "               <td id=\"timelo\" style=\"width:300px; \">出库："+Track.dateTime+"</td>\n"    ;
                        }else if (Track.opCode == 3) {
                            content+=   "               <td>派送中</td>\n"   ;
                        }
                        content+= "            <td>"+Track.houseManager.houseManagerName+"</td>\n";
                        if( Track.opCode == 0 ){
                            content+=    "       <td id=\"opcodeInfo\">已揽件</td>\n" ;
                        } else if (Track.opCode == 1) {
                            content+=    "       <td id=\"opcodeInfo\">入库</td>\n" ;
                        }else if (Track.opCode == 2) {
                            content+=    "       <td id=\"opcodeInfo\">出库</td>\n" ;
                        }else if (Track.opCode == 3) {
                            content+=    "       <td id=\"opcodeInfo\">派送中</td>\n" ;
                        }

                    });

                    content+= "              <td class=\"hidden-xs\" id=\"orderIdInfo\" width=\"50\">"+Order.orderId+"</td>\n" +
                        "                    <td class=\"hidden-xs\" id=\"typeNameInfo\">"+Order.type.typeName+"</td>\n" +
                        "                    <td id=\"weightInfo\">"+Order.weight+"kg</td>\n" +
                        "                    <td>\n" +
                        "                        <button class=\"layui-btn layui-btn-mini\"  >\n" +
                        "                            <a  class=\"layui-icon\" id=\"updateInfo\">&#xe642;出库</a >\n" +
                        "                       </button>"
                    "                    </td>\n" +
                    "                </tr>";
                });

                $(".DataTbody").html(content);

                // 分页数据的渲染
                var pageContent = "";

                if(result.pageNum == 1){
                    pageContent = "  <ul class=\"pagination\"><li class=\"disabled\" title=\"1\"><span>首页</span></li>";
                    pageContent +="<li class=\"disabled\" title=\"1\"><span>»</span></li>";
                }else{
                    pageContent +=" <ul class=\"pagination\"><li><a href=\"#\" title=\"1\">首页</a></li>";
                    pageContent +=" <li><a href=\"#\" title=\""+result.prePage+"\" >»</a></li>";
                }

                // 页码
                for(var i=1;i<=result.pages;i++){

                    if(result.pageNum == i){
                        pageContent +="<li class=\"active\"><span title=\""+i+"\">"+i+"</span></li>";
                    }else{
                        pageContent += "<li><a href=\"#\" title=\""+i+"\">"+i+"</a></li>";
                    }
                }

                // 下一页+尾页
                if(result.pageNum == result.pages){
                    pageContent += "<li class=\"disabled\" title=\""+result.pages+"\"><span>»</span></li>";
                    pageContent += "<li class=\"disabled\" title=\""+result.pages+"\"><span>尾页</span></li>";
                }else{
                    pageContent += "<li><a href=\"#\" title=\""+result.nextPage+"\">»</a></li>";
                    pageContent += "<li><a href=\"#\" title=\""+result.pages+"\">尾页</a></li>";
                }
                $("#Pagination").html(pageContent);
            },
            error:function () {
                alert("异步请求失败!");
            }
        });
    }


    function excelAjax(opCode,orderId) {
        $.ajax({
            async:true,
            type:"GET",
            url:"${pageContext.request.contextPath}/track/excel",
            data:{
                opCode:opCode,
                orderId:orderId
            },
            dataType:"json",
            success:function(data){
                alert("操作成功");
            },
            error:function () {
                alert("异步请求失败!");
            }
        });
    }


    function updateAjax(orderId) {
        var opCode =2;
        $.ajax({
            async:true,
            type:"GET",
            url:"${pageContext.request.contextPath}/track/update",
            data:{
                orderId:orderId,
                opCode:opCode
            },
            dataType:"json",
            success:function(data){
                alert("出库成功");
            },
            error:function () {
                alert("异步请求失败!");
            }
        });
    }


    function findAmountType(){
        $("#typeNameSelect").empty();
        $("#typeNameSelect").append("<option value=\"\">请选择类型</option>");
        $.ajax({
            async:true,
            type:"GET",
            url:"${pageContext.request.contextPath}/type/getAllType",
            data:{ },
            dataType:"json",
            success:function(data){
                console.log(data);
                $.each(data, function (i, Type) {

                    if (Type == null) {
                        return;
                    }
                    $("#typeNameSelect").append("<option value="+data[i].typeName+">"+data[i].typeName+"</option>");
                });

            },
            error:function () {
                alert("异步请求失败!");
            }
        });
    }


    /**
     * 发送异步请求
     */
    function sendAjax(pageNum,pageSize) {
        var opCode = "1";
         $(".DataTbody").empty();
         var content = "";
        $.ajax({
            async:true,
            type:"GET",
            url:"${pageContext.request.contextPath}/track/getOrderList",
            data:{
                pageNum:  pageNum,
                pageSize: pageSize,
                opCode:   opCode
            },
            dataType:"json",
            success:function (result) {
                // 数据的渲染
                console.log(result);

                $.each(result.list,function (index,Order) {
                        $.each(Order.tracks,function (index,Track) {
                            content+="<tr>\n" +
                                "           <td><input type=\"checkbox\" name=\"checked\" lay-skin=\"primary\" data-id=\"1\"></td>\n" +
                                "           <td class=\"hidden-xs\" style=\"width:50px; \"  >"+Track.house.houseId+"</td>\n" +
                                "           <td class=\"hidden-xs\" style=\"width:200px; \" >"+Track.house.houseName+"</td>\n";
                            if( Track.opCode == 0 ){
                                content+=    "               <td id=\"timelo\"style=\"width:300px; \">揽件："+Track.dateTime+"</td>\n"   ;
                            } else if (Track.opCode == 1) {
                                content+=   "               <td id=\"timelo\" style=\"width:300px; \">入库："+Track.dateTime+"</td>\n"    ;
                            }else if (Track.opCode == 2) {
                                content+=   "               <td id=\"timelo\" style=\"width:300px; \">出库："+Track.dateTime+"</td>\n"    ;
                            }else if (Track.opCode == 3) {
                                content+=   "               <td>派送中</td>\n"   ;
                            }
                            content+= "            <td>"+Track.houseManager.houseManagerName+"</td>\n";
                                    if( Track.opCode == 0 ){
                                        content+=    "       <td id=\"opcodeInfo\" >已揽件</td>\n" ;
                                    } else if (Track.opCode == 1) {
                                        content+=    "       <td id=\"opcodeInfo\">入库</td>\n" ;
                                    }else if (Track.opCode == 2) {
                                        content+=    "       <td id=\"opcodeInfo\">出库</td>\n" ;
                                    }else if (Track.opCode == 3) {
                                        content+=    "       <td id=\"opcodeInfo\">派送中</td>\n" ;
                                    }
                        });
                    content+= "              <td class=\"hidden-xs\" id=\"orderIdInfo\" width=\"50\">"+Order.orderId+"</td>\n" +
                        "                    <td class=\"hidden-xs\" id=\"typeNameInfo\">"+Order.type.typeName+"</td>\n" +
                        "                    <td id=\"weightInfo\">"+Order.weight+"kg</td>\n" +
                        "                    <td>\n" +
                        "                        <button class=\"layui-btn layui-btn-mini\"  >\n" +
                        "                            <a  class=\"layui-icon\" id=\"updateInfo\">&#xe642;出库</a >\n" +
                        "                       </button>"
                        "                    </td>\n" +
                        "                </tr>";
                });
                $(".DataTbody").html(content);
                // 分页数据的渲染
                var pageContent = "";

                if(result.pageNum == 1){
                    pageContent = "  <ul class=\"pagination\"><li class=\"disabled\" title=\"1\"><span>首页</span></li>";
                    pageContent +="<li class=\"disabled\" title=\"1\"><span>»</span></li>";
                }else{
                    pageContent +=" <ul class=\"pagination\"><li><a href=\"#\" title=\"1\">首页</a></li>";
                    pageContent +=" <li><a href=\"#\" title=\""+result.prePage+"\" >»</a></li>";
                }

                // 页码
                for(var i=1;i<=result.pages;i++){

                    if(result.pageNum == i){
                        pageContent +="<li class=\"active\"><span title=\""+i+"\">"+i+"</span></li>";
                    }else{
                        pageContent += "<li><a href=\"#\" title=\""+i+"\">"+i+"</a></li>";
                    }
                }

                // 下一页+尾页
                if(result.pageNum == result.pages){
                    pageContent += "<li class=\"disabled\" title=\""+result.pages+"\"><span>»</span></li>";
                    pageContent += "<li class=\"disabled\" title=\""+result.pages+"\"><span>尾页</span></li>";
                }else{
                    pageContent += "<li><a href=\"#\" title=\""+result.nextPage+"\">»</a></li>";
                    pageContent += "<li><a href=\"#\" title=\""+result.pages+"\">尾页</a></li>";
                }
                $("#Pagination").html(pageContent);
            },
            error:function () {
                alert("异步请求失败!");
            }
        });

    }
</script>
</body>

</html>
